<template>
	<view class="container tc">
		<image class="logo" src="../../static/login/logo.png"></image>
		<text class="title">悟空淘助手</text>
		<input class="username" type="text" placeholder="请输入用户名" v-model="username">
		<input class="password" type="password" placeholder="请输入密码" v-model="password">
		<input class="phone" type="number" maxlength="11" placeholder="请输入手机号" v-model="phone">
		<view class="code">
			<input type="number" maxlength="6" placeholder="请输入短信验证码" v-model="code">
			<view class="get" @click="openSvg">
				{{isSend ? time : '获取验证码'}}
			</view>
		</view>
		<view class="code">
			<input type="text" maxlength="6" placeholder="请输入邀请码" v-model="inviteCode">
			<view class="get" @click="qrShow = true">
				获取邀请码
			</view>
		</view>
		<view class="btn" @click="register">注册</view>
		<view class="tip" @click="toPath('login')">已有账号？<text>立即登录</text></view>
		<!-- 扫码客服弹窗 -->
		<van-dialog class="custom-dialog" use-slot title="联系客服" :show="qrShow" :showConfirmButton="false" closeOnClickOverlay
		 @close="qrShow = false">
			<view class="vip-container">
				<view class="vip-tip">添加客服获取专属邀请码</view>
				<image src="../../static/my/weixin_logo.png" mode=""></image>
				<view class="vip-send">回复数字“2”，或者点击发送小程序卡片</view>
				<button class="vip-btn" open-type="contact" @click="qrShow = false">确定</button>
			</view>
		</van-dialog>
		<!-- 图形验证码弹窗 -->
		<van-dialog class="custom-button" use-slot title="图片验证码" :show="svgShow" @confirm="submit">
			<input type="text" placeholder="请输入图形验证码" v-model="svgCode">
			<image :src="svgUrl"></image>
		</van-dialog>
	</view>
</template>

<script>
	import {
		tip,
		tip2
	} from '@/utils/tip'
	export default {
		data() {
			return {
				qrShow: false,
				username: '',
				password: '',
				phone: '',
				code: '',
				inviteCode: '', // 邀请码
				svgShow: false,
				svgCode: '',
				svgUrl: '',
				time: 60,
				isSend: false, //是否发送验证码
				timer: null
			}
		},
		onLoad() {
			console.log(tip)
		},
		methods: {
			toPath(val) {
				uni.navigateTo({
					url: `/pages/common/${val}`
				})
			},
			// closeVip() {
			// 	this.qrShow = false
			// },
			openSvg() {
				if (this.isSend) return
				if (!this.phoneValid()) return
				this.svgShow = true
				this.getSvg()
			},
			// 获取图形
			getSvg() {
				let params = {
					type: 'base64'
				}
				this.$service.common.getSvg(params).then((res) => {
					this.svgUrl = res.data
					this.captchaId = res.captchaId
				}).catch((err) => {

				})
			},
			// 验证码倒计时
			timeDown() {
				this.isSend = true
				this.timer = setInterval(() => {
					this.time--
					if (this.time <= 0) {
						clearInterval(this.timer)
						this.time = 60
						this.isSend = false
					}
				}, 1000)
			},

			// 提交图形验证码
			submit() {
				if (!this.svgCode) {
					tip({ title: '图形验证码不能为空' })
					return
				}
				this.getCode()
			},
			// 获取短信验证码
			getCode() {
				let params = {
					phone: this.phone,
					captchaId: this.captchaId,
					verifyCode: this.svgCode
				}
				this.$service.common.getCode(params).then(() => {
					this.timeDown()
				}).catch((err) => {
					uni.showToast({
						title: '图形' + err,
						icon: 'none'
					})
				})
				this.svgCode = '' //清空
				this.svgUrl = ''
				this.svgShow = false // 弹窗关闭
			},
			// 注册
			register() {
				let params = {
					phone: this.phone,
					username: this.username,
					password: this.password,
					code: this.code,
					inviteCode: this.inviteCode					
				}
				if (!this.valid()) return
				this.$service.common.regist(params).then(async (res) => {
					await tip({ title: '注册成功~' })
					uni.navigateTo({
						url: '/pages/common/login'
					})
				}).catch((err) => {
					tip({ title: err })
				})
			},
			phoneValid() {
				if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
					if (!this.phone) {
						tip({
							title: '手机号码不能为空'
						})
					} else {
						tip({
							title: '手机号码有误，请重填'
						})
					}
					return false;
				} else {
					return true
				}
			},
			// 校验
			valid() {
				if (!this.username) {
					tip({
						title: '用户名不能为空'
					})
					return false
				}
				if (!this.password) {
					tip({
						title: '密码不能为空'
					})
					return false
				}
				if (!this.phone) {
					tip({
						title: '手机号码不能为空'
					})
					return false
				}
				if (!this.code) {
					tip({
						title: '短信验证码不能为空'
					})
					return false
				}
				if (!this.inviteCode) {
					tip({
						title: '邀请码不能为空'
					})
					return false
				}
				return true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.input-placeholder {
		color: white;
	}

	.container {
		widht: 100vw;
		height: 100vh;
		background-color: white;
		padding-top: 82rpx;

		.logo {
			width: 240rpx;
			height: 240rpx;
			display: block;
			margin: 0 auto;
		}

		text {
			display: block;
		}

		.title {
			font-size: 48rpx;
			color: $main-color;
			font-weight: bold;
			// margin-top: 38rpx;
		}

		input {
			width: 500rpx;
			margin: 0 auto;
			border-bottom: 2rpx solid #F2F2F2;
			font-size: 24rpx;
			text-align: left;
			padding-bottom: 12rpx;
			margin-top: 52rpx;
		}

		.username {
			margin-top: 78rpx;
		}

		.code {
			position: relative;
			width: 500rpx;
			margin: 0 auto;
			margin-top: 52rpx;

			.get {
				position: absolute;
				right: 0;
				bottom: 20rpx;
				color: $main-color;
				font-size: 24rpx;
				z-index: 999;
			}

		}

		.btn {
			width: 342rpx;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 42rpx;
			text-align: center;
			font-size: 24rpx;
			color: white;
			background-color: $main-color;
			margin: 0 auto;
			margin-top: 90rpx;
		}

		.tip {
			margin-top: 40rpx;
			color: #666666;

			text {
				display: inline;
				color: #169AFF;
			}
		}

		/deep/ .custom-dialog {
			.van-dialog__header {
				padding-top: 28rpx;
			}

			text-align: center;
			
			image {
				width: 170rpx;
				height: 138rpx;
			}

			.vip-container {
				padding-bottom: 50rpx;
			}

			.vip-tip {
				color: #666666;
				margin: 20rpx 0;
			}

			.vip-send {
				color: #0C5DFF;
				margin-top: 20rpx;
				margin-bottom: 60rpx;
			}

			.vip-btn {
				font-size: 28rpx;
				width: 342rpx;
				height: 72rpx;
				background-color: #0C5DFF;
				border-radius: 42rpx;
				line-height: 72rpx;
				text-align: center;
				color: white;
				margin: 0 auto;
			}
		}

		/deep/ .custom-button {
			input {
				width: 70%;
				margin: 0 auto;
				margin-top: 30rpx;
			}

			image {
				margin-top: 20rpx;
				display: block;
				width: 180rpx;
				height: 90rpx;
				margin: 30rpx auto;
			}
		}
	}
</style>
